<template>

  <div id="print">
    <div
      class="no-print"
      style="text-align: right"
    >
      <a-button
        v-print="'#print'"
        ghost
        type="primary"
      >打印</a-button>
    </div>
    <table
      class="page-wrap"
      style="  width: 100%;"
      cellspacing="0"
      cellpadding="0"
    >
      <thead id="head">
        <tr>
          <th>
            <span>江南布衣<span>+</span></span>
            <span style="font-size: 15px;margin-left: 15px;">JNBY GROUP</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td id="content">
            <div
              v-for="(item,index) in dataList"
              :key="index"
            >
              <div
                style="width:100%;"
                id="imgtitle"
              >
                <p style="font-size: 20px;text-align:right;margin-bottom:0;margin-right: 20px;">
                  {{index + 1 + '/' +( dataList.length)}}</p>
                <p style="font-size: 20px;text-align:center">{{index + 1 + '/' + dataList.length + ' ' + item.code}}</p>
              </div>

              <div id="imgs">
                <div class="left">
                  <div>
                    <div style=" width: 100%;padding-bottom:10px;display: flex;justify-content: center;">
                      <img
                        style="-webkit-touch-callout: none; pointer-events: none"
                        v-for="(imgitem, index) in item.colors"
                        :key="`${index}`"
                        :style="{
                      width: item.colors.length == 1 ? '700px' : item.colors.length <= 4 ? '330px' : item.colors.length <= 6 ? '260px' : item.colors.length <= 16 ? '180px' : '140px',
                      height: item.colors.length == 1 ? '700px' : item.colors.length <= 4 ? '330px' : item.colors.length <= 6 ? '260px' : item.colors.length <= 16 ? '180px' : '140px',
                      margin: '0 10px 10px 10px',
                      objectFit: 'scale-down',
                      background: '#fafafa',
                      position: 'relative',
                    }"
                        :src="imgitem.images[0].url"
                        onerror="this.src='https://img.bzhz.jnbygroup.com/cloth.png'"
                      />
                    </div>

                    
                  </div>

                </div>
                <div class="right">
<div
                      id="patternText"
                      style="line-height: 2em;"
                    >
                      <p>图案名称: {{item.name}}</p>
                      <p>平面设计师:{{item.designerUserName}}</p>
                      <p>货季: {{item.season}}</p>
                      <p>描述: {{item.remarks}}</p>
                      <p>含义: {{item.meaning}}</p>
                      <p v-if="item.source ==1">来源: 原创</p>
                      <p v-if="item.source ==2">来源: 借鉴</p>
                      <p v-if="item.source ==3">来源: 出处</p>
                      <p>是否有英文: {{item.whetherHasEnglish == 1 ? '是' :'否'}}</p>
                      <p v-if="item.whetherHasEnglish == '1'">英文原文: {{item.englishOriginal}}</p>
                      <p v-if="item.whetherHasEnglish == '1'">英文解释: {{item.englishExplain}}</p>
                      <p>是否有敏感风险: {{item.riskFlag == 1 ? '是' :'否'}}</p>
                      <div
                        v-if="item.riskFlag == 1"
                        style="display:flex"
                      >敏感风险: <div
                          v-for="(risk,index) in item.risk"
                          :key="index"
                          style="margin-left:5px"
                        >

                          <div
                            v-for="(subitem,index) in riskList"
                            :key="index"
                          >
                            <p v-if="subitem.value == risk">
                              {{subitem.title}}
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>

          </td>
        </tr>
      </tbody>

      <tfoot id="head">
        <tr>
          <td>
            <span>Better Design Better Life/</span>
          </td>
        </tr>
      </tfoot>
    </table>
    <div>
      <a-spin
        tip="Loading..."
        v-if="loading"
      >
        <div class="spin-content">
          加载中。。。
        </div>
      </a-spin>
    </div>
  </div>

</template>
<script>
document.addEventListener('DOMContentLoaded', function (event) {
  let table = document.getElementById('content'),
    htm = '页面内容……将tbody>td作为页面内容区，按需填放内容'
  for (let i = 0; i < 100; i++) {
    htm += '<div>页面内容' + (i + 1) + '</div>'
  }
  table.innerHTML = htm
})
</script>
<script>
const riskList = [
  {
    title: '原创／著作问题',
    value: '10'
  },
  {
    title: '社会和谐',
    value: '20'
  },
  {
    title: '政治敏感',
    value: '30'
  },
  {
    title: '文化歧视',
    value: '40'
  },
  {
    title: '语言问题',
    value: '50'
  },
  {
    title: '未成年问题',
    value: '60'
  }
]
import { getexamineList } from '@api/pattern/index.js'

export default {
  data() {
    return {
      loading: false,
      riskList,
      dataList: [],
      data: [],
      riskFlag: '',
      risks: [],
      bandLeft: [],
      bandRight: [],
      showSkc: true
    }
  },
  mounted() {
    this.loadData()
  },
  computed: {
    season() {
      return this.$route.query.season || ''
    },
    brand() {
      return this.$route.query.brand || ''
    },
    jobNumber() {
      return this.$store.getters.userInfo.workNo || ''
    }
  },

  methods: {
    async loadData() {
      this.loading = true
      const data = {
        examineStatus: '0',
        jobNumber: this.jobNumber,
        childList: [],
        brand: this.brand,
        season: this.season,
        relationSkcFlag: 2,
        groupNameList: ['品牌组'],
        code: ''
      }
      try {
        const res = await getexamineList('print', data)
        if (res.code == 200) {
          if (!res.data.length) {
            this.$message.warning('无数据')
          } else {
            res.data.map((item, index) => {
                // if (index < 2) {
                if (item.brandCode === '速写') {
                  item.brandCode = 'CROQUIS'
                } else if (item.brandCode === 'A PERSONAL NOTE 73') {
                  item.brandCode = 'APN 73'
                } else if (item.brandCode === 'jnby by JNBY') {
                  item.brandCode = '童装'
                } else if (item.brandCode === 'Pomme de terre') {
                  item.brandCode = '蓬马'
                } else if (item.brandCode === 'jnby for mini') {
                  item.brandCode = '婴童'
                } else {
                  item.brandCode = item.brandCode
                }
                this.dataList.push(item)
                // }
              })
          }
        } else {
          this.$message.error(res.msg || res.message)
        }
      } catch (error) {
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
@media print {
  #head {
       opacity: 100!important;
  }
  .no-print {
    display: none;
  }
  body {
    height: auto;
  }
  #imgtitle {
    margin-top: 30px;
  }
  #skc {
    margin-top: 30px;
  }
  @page {
     size:landscape; 
    /* 设置每页顶部、底部间距 { */
    margin: 10px 0;
  }
  .page-wrap {
    width: 100%;
  }
  #head th {
    color: #abc577;
    font-size: 24px;
    position: fixed;
    left: 20px;
  }
  .page-wrap tfoot td {
    /* height: 30px;
    line-height: 30px; */
    color: #abc577;
    font-size: 24px;
    position: fixed;
    left: 20px;
  }
  .page-wrap tfoot td {
    color: #abc577;
    position: fixed;
    bottom: 20px;
    border-bottom: 1px dotted #abc577;
    border-bottom-width: 0;
  }
}
#print {
  margin-bottom: 10px;
  // display: flex;
  flex-direction: column;
}
// #app:not(:last-child) {
//   page-break-after: always;
// }
.spin-content {
  border: 1px solid #91d5ff;
  background-color: #e6f7ff;
  padding: 30px;
}
#imgs {
  display: flex;
  width: 100%;
  padding: 20px;
  justify-content: space-between;
  page-break-after: always;
}
#imgs .left {
  width: 70%;
}
#imgs .right {
  width: 30%;
}
#imgs .left .imgList {
  width: 100%;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
}

.ant-list-items {
  display: flex;
  flex-wrap: wrap;
}

#patternText {
  margin: 30px 10px;
}

img {
  page-break-inside: avoid;
}
#head {
  opacity: 0;
}

#print p {
  margin-top: 0;
  margin-bottom: 0;
}

.half {
  width: 50%;
}
</style>
<style>
#table .ant-table {
  font-size: 12px;
}
#table .table-color {
  color: #f5222d;
}
/* @media print 限定样式，只作用于打印页 */

</style>
<style>

/* @media print {
 html {
    zoom: 70%;
  }
} */
</style>